<template>
  <div>
    <el-form-item label="子项配置">
      <el-button @click="addItem">添加</el-button>
    </el-form-item>
    <div class="form-items">
      <div class="form-item" v-for="(item,i) in value.placeholder" :key="i">
        统计名称：<el-input size="small" v-model="item.title" placeholder="请设置提示语"/>
        <i class="item-close el-icon-close" @click="deleteItem(i)"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StatisticalModuleConfig",
  components: {},
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    // 添加元素
    addItem() {
      if (this.value.placeholder.length >= 4) {
        alert("最多只能添加4个");
        return;
      }
      this.value.placeholder.push({
        num: this.value.placeholder.length,
        title: "统计项" + (this.value.placeholder.length + 1),
      });
    },

    /* 删除元素
     * index 对应索引下标
     */
    deleteItem(index){
      if(this.value.placeholder.length == 1){
        alert("至少需要保留一个");
        return
      }
      this.value.placeholder.splice(index,1)
    }
  },
};
</script>

<style scoped>
.form-items{
  width: 90%;
  margin: auto;
}
.form-item{
  margin-bottom: 8px;
  padding: 8px;
  height: 32px;
  background: #fff;
}
/deep/.form-item .el-input{
  display: inline-block;
  width: calc(90% - 72px);
}
.item-close{
  padding-left: 8px;
}
</style>
